<template>
  <el-dialog
      :show-close="false"
      :visible="visiable"
      :modal="needModel"
      :modal-append-to-body="false"
      :fullscreen="false"
      class="con-dialog"
      :center="true"
      :width="width"
      :top="top"
      :destroy-on-close="destroyOnClose"
      :before-close="closeDialog"
      :custom-class="customClass"
  >

    <div @click="closeDialog">
      <CloseIcon class="closeIcon"/>
    </div>
    <span class="Title">
      {{ title }}
    </span>
    <slot></slot>
  </el-dialog>
</template>
<script>
import CloseIcon from '../../../utils/Icon/profile/CloseIcon'

export default {
  components: {CloseIcon},
  props: {
    visiable: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '对话框'
    },
    width: {
      type: String,
      default: '95%'
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    top: {
      type: String,
      default: '20vh'
    },
    customClass: {
      type: String,
      default: 'dialogStyle'
    },
    needModel: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    closeDialog: function () {
      this.$emit('close')
    },
  },
}
</script>
<style>
.dialogStyle {
  height: 359px;
  background: #161616;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  border: 6px solid rgba(255, 255, 255, 0.1);
}

.v-modal {
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.closeIcon {
  position: absolute;
  left: 14px;
  top: 18px;
  height: 16px;
  width: 16px;
}

.closeIcon:hover {
  cursor: pointer
}

.Title {
  position: absolute;
  left: 50px;
  top: 12px;
  width: 167px;
  height: 25px;

  font-size: 18px;
  font-family: avalonregular, poppins, helvetica, sans-serif;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 27px;
}
</style>
